<template>

	<view>
		<!-- #ifdef APP-PLUS -->
		<view v-if="showNotice">
			<topNotice message="用于上传图片作为好友圈/友商圈图片的展示效果" v-if="showNotice" title="媒体权限使用说明"></topNotice>
		</view>
		<!-- #endif -->
		<nav-header v-if="type === '0'" title="发布好友圈" custom-nav>
			<!-- <template v-slot:right>
				<up-button @click="submitPost" text="发表"></up-button>
			</template> -->
		</nav-header>
		<nav-header v-else title="发布友商圈" custom-nav>
			<!-- <template v-slot:right>
				<up-button @click="submitPost" text="发表"></up-button>
			</template> -->
		</nav-header>
		<view class="container">
			<uni-forms>
				<up-textarea v-model="idea" placeholder="这一刻的想法..." @input=""></up-textarea>

				<!-- 图片 -->
				<view class="img">
					<view class="publish-img">
						<view v-for="(it, index) in pictures" :key="index">
							<view class="img-container">
								<img :src="it" alt="" class="pimg" @click="previewImage(index)">
								<view class="imgclose"><up-icon name="close-circle-fill" size="19"
										@click="deleteImg(index)"></up-icon></view>
							</view>
						</view>

						<!-- <image-upload :onSuccess="onUnloadImageSuccess" class="publish-img">
							<view class="icon-plus">
								<up-icon name="plus" size="50" v-show="pictures.length < 9" :src="picture"></up-icon>
							</view>
						</image-upload> -->

						<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9"
							@permissionRequestComplete="handlePermissionImage">
							<view class="pic-add">
								<view class="box">
									<svg-icon icon="plus" :width="48"></svg-icon>
									<text class="text-xs-Regular">上传照片</text>
								</view>
							</view>
						</image-upload>
					</view>
				</view>



			</uni-forms>

			<view class="friend-txl" style="margin-top: 24rpx;">
				<view class="txl text-sm-Regular" @click="getLocation">
					<view class="txl-left">
						<!-- <img src="../../static/icon/gth.svg" alt="" class="txl-img" /> -->
						<svg-icon icon="location" :width="48"></svg-icon>
						<text>所在位置</text>
					</view>
					<view class="txl-right">
						{{ formData.address }}
						<uni-icons type="right" color="#A4A7AE" size="16"></uni-icons>
					</view>
				</view>
				<view class="txl text-sm-Regular" @click="show = true">
					<view class="txl-left">
						<!-- <img src="../../static/icon/setting.svg" alt="" class="txl-img" /> -->
						<svg-icon icon="eye" :width="50"></svg-icon>
						<text>状态</text>
						<text> {{ statusName }}</text>
					</view>
					<view class="txl-right">
						<uni-icons type="right" color="#A4A7AE" size="16"></uni-icons>
					</view>
				</view>
				<view v-if="watchShowId === 2 || watchShowId === 3" class="txl text-sm-Regular" @tap="rules">
					<view class="txl-left">
						<!-- <img src="../../static/icon/setting.svg" alt="" class="txl-img" /> -->
						<svg-icon icon="visibility" :width="48"></svg-icon>
						<text> {{ watchShowId === 2 ? '谁可以看' : '不给谁看' }}</text>
					</view>
					<view class="txl-right">
						{{ names }}
						<uni-icons type="right" color="#A4A7AE" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view>
			<up-picker :show="show" keyName="label" :columns="columns" @change="onPickerChange" @cancel="onCancel"
				@confirm="onConfirm"></up-picker>
		</view>

		<view class="tabbar">
			<view class="list">
				<view class="right">
					<button class="btncolor" type="primary" size="mini" @tap.stop.native="submitPost()">
						<text class="text-md-Medium">发布动态</text>
					</button>
				</view>
			</view>
		</view>
	</view>
	<view class="map_container" v-if="mapShow">
		<map-selector @goback="goBack" @addressSelected="saveAddress" :initialLatitude="latitude"
			:initialLongitude="longitude"></map-selector>
	</view>


	<view class="parent-component" v-if="friendShow">
		<SelectUser @onShow="onShowRules" v-if="friendShow" :isShow="friendShow" :isMultipleSelectable="true"
			:method="'GET'" :url="`/friend/findFriendByType/${type}`" @userSelected="handleSelectedUsers" />
	</view>


</template>

<script>
	import MapSelector from '../../components/map-selector/map-selector.vue';
	import SelectUser from '../../components/select-user/select-user.vue';
	export default {
		components: {
			MapSelector,
			SelectUser
		},
		data() {
			return {
				type: '',
				idea: '',
				latitude: '', // 纬度
				longitude: '', // 经度
				watchShowId: 0,
				mapShow: false,
				friendShow: false,
				show: false,
				picture: "https://img12.iqilu.com/10339/article/202405/23/1ab84568f2206606ac8c98f592319449.jpeg",
				pictures: [],
				names: "",
				showNotice: null,
				columns: [
					[{
						label: '公开',
						id: 0
					}, {
						label: '私密',
						id: 1
					}, {
						label: '部分可见',
						id: 2
					}, {
						label: '部分不可见',
						id: 3
					}]
				],
				formData: {
					pictureList: [],
					status: "0",
					content: "今天天气真好！",
					address: "",
					type: "",
					userIds: []
				},
				statusName: '公开',
				initialValue: '公开'
			};
		},
		methods: {
			handlePermissionImage(show) {
				this.showNotice = show
			},

			// 图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.pictures,
					current: index
				});
			},

			// 删除图片
			deleteImg(index) {
				for (let i = this.pictures.length - 1; i >= 0; i--) {
					if (i === index) {
						this.pictures.splice(index, 1)
					}
				}
			},

			onCancel(e) {
				// 将选择的值重置为初始值
				this.statusName = this.initialValue;
				this.formData.status = 0
				this.show = false;
				this.watchShowId = 0;
				this.watchShow = false;
				this.names = ""
			},
			onConfirm(index) {
				const id = index.value[0].id
				// 处理确定操作，例如获取选择的值
				this.formData.status = id
				this.watchShowId = id;
				this.show = false;
				this.names = ""


			},
			// 图片上传		  
			onUnloadImageSuccess(file, res) {
				console.log(res.data.originUrl)

				this.pictures.push(res.data.originUrl)

			},
			getLocation() {
				console.log("打开位置");

				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.mapShow = true;
					},
					fail: (err) => {
						console.error('获取位置失败：', err);
					}
				});
			},

			saveAddress(address) {
				console.log("保存", address)
				this.formData.address = address.name
				this.mapShow = false;
			},
			// 滚动的时候出现
			onPickerChange(e) {
				this.statusName = e.value[0].label
				// 保存初始选择的值（如果还没有保存过）
				if (!this.initialValue) {
					this.initialValue = e.value[0].label;
				}
			},

			// 谁可以看
			rules() {
				console.log('谁可以看')
				this.friendShow = true
			},
			handleSelectedUsers(selectedUsers) {
				if (selectedUsers.length > 0) {
					// 这里假设选择的用户信息中，用户姓名在某个字段里（比如 user.name），你需要根据实际 SelectUser 组件返回的数据结构调整
					console.log("用户测试单选，多选", selectedUsers)
					const userIds = selectedUsers.map(item => item.id)
					this.formData.userIds = userIds
					this.names = selectedUsers.map(item => item.nickName).join(', ');

				}

				this.friendShow = false; // 隐藏 SelectUser 组件
			},

			onShowRules() {
				this.friendShow = false; // 隐藏 SelectUser 组件
			},
			goBack() {
				this.mapShow = false;
			},


			submitPost() {
				// 赋值

				this.formData.content = this.idea

				this.formData.pictureList = this.pictures
				console.log('发表内容：', this.formData)
				if (this.formData.content == "") {
					uni.showToast({
						title: '内容不能为空',
						icon: 'error',
					});
					return;
				}
				this.$http({
					url: '/friendCircle/add',
					data: this.formData,
					method: 'POST'
				}).then(res => {
					console.log(res)

					uni.showToast({
						title: '发布成功',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});
					uni.navigateBack({});
					// setTimeout(() => {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	});
					// }, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
				})

			}
		},
		onLoad(options) {
			// 0是好友圈 1是商友圈
			const type = options.type;
			if (type === '0') {

				this.type = type
				this.formData.type = type
			} else if (type === '1') {
				this.type = type
				this.formData.type = type
			}



		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		z-index: 1;
	}

	.textarea {
		resize: none;
	}

	.publish-img {
		display: flex;
		flex-wrap: wrap;
	}

	.icon-plus {
		width: 190rpx;
		height: 190rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		background-color: #f2f2f2;
		/* 浅灰色背景色 */
		margin-top: 10rpx;
	}

	.pic-add {
		background-color: $gray-100;
		width: 205rpx;
		height: 205rpx;
		border-radius: 16rpx;
		grid-row: span 1;
		/* 确保上传按钮占据一个单元格 */

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			gap: 16rpx;
		}
	}

	.pimg {
		width: 190rpx;
		height: 190rpx;
		padding: 10rpx 20rpx 0 0;
		position: relative;
	}

	.img-container {
		position: relative;
	}

	.imgclose {
		position: absolute;
		top: 1rpx;
		left: 160rpx;
	}

	.friend-txl {
		width: 100%;

	}

	.txl {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			margin-left: 20rpx;
		}
	}

	.txl-left {
		display: flex;
		align-items: center;
		color: $gray-500;
	}

	.txl-right {
		display: flex;
		align-items: center;
	}

	.txl-img {
		width: 50rpx;
		height: 50rpx;
	}

	.img {
		// margin-left: 40px;
		// margin-top: 3px;
		padding: 24rpx 32rpx;
	}

	.map_container {
		position: fixed;
		/* 使用 fixed 定位，确保容器相对于视口定位 */
		top: 0;
		/* 从顶部开始 */
		bottom: 0;
		/* 到底部结束 */
		left: 0;
		/* 从左侧开始 */
		right: 0;
		/* 到右侧结束 */
		z-index: 9999;
		/* 设置一个较高的 z-index 值，确保容器覆盖其他元素 */
	}

	.parent-component {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.tabbar {
		width: 100%;
		position: fixed;
		bottom: 42rpx;
		left: 0;
		border-top: 1rpx solid $gray-200;
		background-color: $white;
		z-index: 9999;

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 32rpx;

			.right {
				width: 100%;

				.btncolor {
					width: 100%;
					background-color: $brand-500;
					color: $white;
					padding: 16rpx 32rpx;
					border-radius: 40rpx;
					text-align: center;
					line-height: 46rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>